<template>
	<view class="container">
		<uni-list :border="true">
			<uni-list-item title="房间:" :rightText="form.roomName" />
			<uni-list-item title="合同周期:" :rightText="form.sourceStartTime+ '~' + form.sourceEndTime" />
			<uni-list-item title="距离到期时间(天):" :rightText="form.becomeDue?form.becomeDue:'0'" />
			<view class="list flex">
				<view class="list-left">预计延期到:</view>
				<div class="list-content flex-1 text-right">
					<text>{{form.endTime}}</text>
				</div>
			</view>
			<view class="list flex">
				<view class="list-left">延期费用:</view>
				<div class="list-content flex-1 text-right">
					<text class="yellow" v-if="form.allTotal">{{(form.allTotal).toFixed(2)}}元</text>
				</div>
			</view>
		</uni-list>
		<view class="tipsBox flex">
			<view class="tips flex flex-1"><u-icon class="mr-4rpx" color="#F8534B" size="14" name="info-circle"></u-icon>延期最多不能超过7天，延期一天费用为日租金的3倍</view>
		</view>
		<view class="btn" @click="confirm">查看账单(去支付)</view>
		<!-- <u-button text="查看账单(去支付)" class="btn" @click="confirm"></u-button> -->
	</view>
</template>

<script setup lang="ts">
import { getContractApplyDeatil } from '@/common/API/contract'
import { onLoad} from "@dcloudio/uni-app"
import { reactive } from "vue";
import dayjs from "dayjs"

const form = reactive({
	roomName: null,
	applyStatusStr: null,
	sourceStartTime: null,
	sourceEndTime: null,
	cycle: null,
	applyTime: null,
	endTime: null,
	id: null,
	allTotal: null,
	info: {},
	becomeDue:null
})
const confirm = () => {
	uni.redirectTo({
		url: '/pages/personal/bills/billList'
	})
}
//处理时间戳
const timestamp = (val : any, s) => {
	return !s ? dayjs(val).format('YYYY-MM-DD') : dayjs(val).format('YYYY-MM-DD HH:mm:ss')
}
const getDetail = async () => {
	let res = await getContractApplyDeatil(form.id)
	if(res){
		let info = res
		form.info = info
		form.roomName = info.roomName
		form.id = info.id
		form.applyStatusStr = info.applyStatusStr
		form.sourceStartTime = info.sourceStartTime
		form.sourceEndTime = info.sourceEndTime
		form.allTotal = info.allTotal
		form.cycle = JSON.stringify(info.cycle < 0 ? 0 : info.cycle)
		form.applyTime = info.applyTime
		form.endTime = info.endTime
		// form.becomeDue = JSON.stringify(info.becomeDue < 0 ? 0 : info.becomeDue)
		form.becomeDue = JSON.stringify(dayjs(timestamp(form.sourceEndTime)).diff(timestamp(form.applyTime),'day'))
	}
}
onLoad((options)=>{
	if(options){
		form.id = options.id
		getDetail()
	}
})
</script>
<style lang="scss" scoped>
.container{
	padding: 32rpx 0;
	::v-deep.uni-list{
		.uni-list-item__content-title{
			font-size: 28rpx;
		}
		.uni-list-item__extra-text{
			font-size: 28rpx;
			color: #4D4D4D;
		}
	}
	.tipsBox{
		padding: 12rpx 32rpx;
		.tips{
			font-size: 24rpx;
			color: #F8534B;
			line-height: 46rpx;
		}
		.status{
			line-height: 46rpx;
		}
	}
	.list{
		padding: 20rpx 32rpx;
		border-top: 2rpx solid #f3f3f3;
		::v-deep.uni-date{
			text-align: right;
			.uni-date__x-input{
				line-height: 54rpx;
				color: $uni-color-primary;
			}
			.uni-date-x--border{
				border: none;
			}
			.uni-icons{
				display: none;
			}
		}
	}
	.btn{
		position: fixed;
		width: 686rpx;
		height: 84rpx;
		line-height: 84rpx;
		color: #fff;
		background: $uni-color-primary;
		bottom: 100rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		border-radius: 200rpx;
		text-align: center;
		::v-deep.u-button__text{
			font-size: 32rpx !important;
		}
	}
}
.text-right{
	text-align: right;
}
</style>
